// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at https://mozilla.org/MPL/2.0/.

@use '../utils' as f3;

// Hide the ticker for reduced motion or older browsers
.c-news-ticker {
    display: none;

    &-content,
    .set-one {
        animation: none;
    }
}

@media (prefers-reduced-motion: no-preference) {
    @keyframes ticker {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(-100%);
        }
    }

    @keyframes repeat {
        0%,
        50% {
            left: 0;
        }

        50.01%,
        100% {
            left: 100%;
        }
    }

    .c-news-ticker {
        $duration: 100s;
        background-color: f3.$black;
        color: white;
        display: block;
        @include f3.mono-font;
        max-width: 100%;
        overflow: hidden;
        padding: 0.5em 0;
        position: relative;

        &-content {
            animation: ticker $duration linear infinite;
            position: relative;
            width: max-content;

            &:hover {
                animation-play-state: paused;
            }
        }

        .set-one {
            animation: repeat $duration linear infinite;
            display: inline;
            left: 0;
            position: relative;
        }

        .set-two {
            display: inline;
        }

        &-title {
            color: f3.$yellow-primary;
            @include f3.mono-font;

            &::before {
                content: '// ';
            }

            &::after {
                content: ' //';
            }
        }

        &-title,
        &-item {
            @include f3.text-body-md;
            display: inline;
            margin-bottom: 0; // protocol override
        }
    }

    @media #{f3.$mq-md} {
        .c-news-ticker {
            &-title,
            &-item {
                @include f3.text-body-lg;
            }
        }
    }
}
